import React, { Component } from 'react';
import Mock from "mockjs"
import "./person.css"
import { connect } from 'react-redux';
import { increment, decrement, addPerson, reducePerson, batchDeletePersons, updateAllPersons, updatePerson } from '../../store/actions';
/**
 * 人员组件
 */
class Person extends Component {

    constructor(props, context) {
        super(props)
        this.state = {
            dialogHidden: false,    //显示是dialog
            formData: {
                id: "",
                name: "",
                age: 23,
                gender: "男",
                school: "",
                checked: false
            }
        }
        //绑定时事件
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleCheckAll = this.handleCheckAll.bind(this)
        this.handleCancelCheckAll = this.handleCancelCheckAll.bind(this)
    }
    /**
     * 新增人员
     */
    handleIncrement = () => {
        const person = Mock.mock({
            id: "@id",
            name: "@cname",
            "age|10-100": 10,
            "gender|1": ["男", "女"],
            "school|1": ["实验附中", "实验一中", "五合中学"],
            checked: false,
            createTime: '@datetime',//创建时间
        })
        this.props.addPerson(person)
        this.props.increment(1)
    }
    /**
    * 删除单个人员
    * @param {*} person 
    * @param {*} index 
    */
    handleDeleteItem = (person, index) => {
        this.props.reducePerson(person)
        this.props.decrement(1)
    }
    /**
     * 批量刪除
     */
    handleBatchDecrement = () => {
        const hasChecked = this.props.persons.some(person => person.checked === true)
        if (hasChecked) {
            const arr = this.props.persons.filter(person => person.checked === true)
            this.props.batchDeletePersons(arr)
            this.props.decrement(arr.length)
        } else {
            alert("未选中删除项，请先选择删除项！")
        }
    }
    /**
     * 更新数据
     */
    handleUpdate = () => {
        const { formData } = this.state
        this.props.updatePerson(formData)
        this.setState({
            dialogHidden: false,
            formData: {}
        })
    }
    /**
    * 单选
    * @param {*} person 
    */
    handleCheckedItem = (person) => {
        person.checked = !person.checked
        this.props.updatePerson(person)
    }
    /**
     * 全选
     */
    handleCheckAll = () => {
        const arr = this.props.persons
        arr.forEach(person => {
            person.checked = true
        });
        this.props.updateAllPersons(arr)
    }
    /**
     * 取消全选
     */
    handleCancelCheckAll = () => {
        const arr = this.props.persons
        arr.forEach(person => {
            person.checked = false
        });
        this.props.updateAllPersons(arr)
    }
   
    /**
     * 显示dialog
     * @param {*} person 
     */
    showDialog = (person) => {
        this.setState({
            dialogHidden: true,
            formData: person
        })
    }
    /**
     * 隐藏dialog
     */
    hiddenDialog = () => {
        this.setState({
            dialogHidden: false,
            formData: {}
        })
    }
    /**
     * 修改值
     * @param { Event } event 
     */
    handleInputChange(event) {
        const target = event.target;
        let value = "";
        switch (target.type) {
            case "checkbox": value = target.type === 'checkbox' ? target.checked : target.value;
            case "radio": value = target.type === 'radio' ? target.checked : target.value;
            case "select": value = target.type === 'select' ? target.checked : target.value;
            case "textarea": value = target.type === 'textarea' ? target.innerText : target.value;
            default: value = target.value; break
        }
        const name = target.name;
        const { formData } = this.state
        formData[name] = value
        this.setState({
            formData: formData
        });
    }

    render() {
        return (
            <div className='person-container'>
                <div className="header">
                    <h1 className='title'>人员数量统计：{this.props.count}</h1>
                    <div className="sub-header">
                        {
                            this.props.persons.every(person => person.checked === true) ?
                                <div className="btn btn-checkall" onClick={this.handleCancelCheckAll}>取消</div> :
                                <div className="btn btn-checkall" onClick={this.handleCheckAll}>全选</div>

                        }
                        <div className="btn btn-add" onClick={this.handleIncrement}>新增</div>
                        <div className="btn btn-delete" onClick={this.handleBatchDecrement}>删除</div>
                    </div>
                </div>
                <div className="notice">
                    已选中<span className='notice-count'>{ }</span>条
                </div>
                <div className="person-main">
                    <div className='person-list'>
                        {
                            this.props.persons.map((person, index) => {
                                return (
                                    <div className="person-item" key={person.id}>
                                        <input className="check-person" name="check-item" type="checkbox" checked={person.checked} onChange={this.handleCheckedItem.bind(this, person)} />
                                        <div className="name"> {person.name}</div>
                                        <div className="age"> {person.age}</div>
                                        <div className="gender"> {person.gender}</div>
                                        <div className="school"> {person.school}</div>
                                        <div className='operation'>
                                            <div className='btn btn-update' onClick={this.showDialog.bind(this, person)}>编辑</div>
                                            <div className='btn btn-delete' onClick={this.handleDeleteItem.bind(this, person, index)}>删除</div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className={this.state.dialogHidden === true ? 'mask' : 'mask hidden'}>
                    <div className='dialog'>
                        <div className="dialog-header">
                            <div className="dialog-header__title">修改用户</div>
                            <div className="dialog-header__closed icon icon-delete" onClick={this.hiddenDialog}></div>
                        </div>
                        <div className="dialog-main">
                            <form className='form form-person'>
                                <input type="hidden" name='id' value={this.state.formData.id} />
                                <input type="hidden" name='checked' value={this.state.formData.checked} />
                                <div className='fieldset'>
                                    <label className='label'>姓名：</label>
                                    <input className='input-element input-text' name='name' type="text" placeholder='姓名' onChange={this.handleInputChange} value={this.state.formData.name} />
                                </div>
                                <div className='fieldset'>
                                    <label className='label'>年龄：</label>
                                    <input className='input-element input-text' name='age' type="number" placeholder='年龄' onChange={this.handleInputChange} value={this.state.formData.age} />
                                </div>
                                <div className='fieldset'>
                                    <label className='label'>性别：</label>
                                    <div className='input-element radio-group__wrapper'>
                                        <div className='radio-group'>
                                            <input className='radio-group__value' name='gender' type="radio" value="男" onChange={this.handleInputChange} checked={this.state.formData.gender === "男"} />
                                            <span className='radio-group__label'>男</span>
                                        </div>
                                        <div className='radio-group'>
                                            <input className='radio-group__value' name='gender' type="radio" value="女" onChange={this.handleInputChange} checked={this.state.formData.gender === "女"} />
                                            <span className='radio-group__label'>女</span>
                                        </div>
                                    </div>
                                </div>
                                <div className='fieldset'>
                                    <label className='label'>学校：</label>
                                    <select className='input-element select-element' name='school' value={this.state.formData.school} onChange={this.handleInputChange}>
                                        <option value="实验附中">实验附中</option>
                                        <option value="实验一中">实验一中</option>
                                        <option value="五合中学">五合中学</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                        <div className="dialog-footer">
                            <div className='btn btn-add' onClick={this.handleUpdate}>确定</div>
                            <div className='btn  btn-delete' onClick={this.hiddenDialog}>取消</div>
                        </div>
                    </div>
                </div>

            </div>
        )
    }
}

const mapStateToProps = function (state) {
    return {
        persons: state.persons,
        count: state.count
    }
}
/**
 * 
 * @param {*} dispatch 
 * @returns 
 */
function mapDispatchToProps(dispatch) {
    return {
        increment: (number) => dispatch(increment(number)),
        decrement: (number) => dispatch(decrement(number)),
        addPerson: (person) => dispatch(addPerson(person)),
        reducePerson: (person) => dispatch(reducePerson(person)),
        batchDeletePersons: (persons) => dispatch(batchDeletePersons(persons)),
        updateAllPersons: (persons) => dispatch(updatePerson(persons)),
        updatePerson: (person) => dispatch(updatePerson(person)),
    }
}

/**
 * 导出计数容器组件
 */
export default connect(mapStateToProps, mapDispatchToProps)(Person)